<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form label-width="80px">
        <el-form-item label="考生类型" class="filter-item">
          <el-select
            v-model="listQuery.condition.parentType"
            style="width: 100%"
            placeholder="请选择"
            @change="handleChange"
          >
            <el-option
              v-for="item in examTypes"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="listQuery.condition.parentType =='SPECIAL_EQP'?'工种':'类别'" class="filter-item">
          <el-select
            v-model="listQuery.condition.examType"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in workTypeList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" class="filter-item">
          <el-input
            v-model="listQuery.condition.userName"
            placeholder="请输入姓名"
            style="width: 200px;"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="身份证号" class="filter-item">
          <el-input
            v-model="listQuery.condition.idCard"
            placeholder="请输入身份证号"
            style="width: 250px;"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>

        <el-form-item label="考试期数" class="filter-item">
          <el-select
            v-model="listQuery.condition.examId"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              v-for="item in examPeriodList"
              :key="item.id"
              :label="item.period"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button
          v-waves
          class="filter-item"
          icon="el-icon-refresh-left"
          @click="resetSearch"
        >
          重置
        </el-button>
      </el-form>
    </div>
    <div class="my-table">
      <div class="table-operate">
        <div class="title">数据列表</div>
        <div class="btns" v-if="hasPerm('admin')">
          <el-button
            v-waves
            type="primary"
            class="operate-item"
            icon="el-icon-s-custom"
            @click="handleSetting"
          >
            考生设置
          </el-button>
          <el-button
            v-waves
            type="primary"
            class="operate-item"
            icon="el-icon-upload"
            @click="handleCreate"
          >
            导入考生
          </el-button>
          <el-button
            v-waves
            type="primary"
            plain
            :loading="downloadLoading"
            class="operate-item"
            icon="el-icon-download"
            @click="handleExport"
          >
            导出考生
          </el-button>
          <el-button
            v-waves
            :loading="downloadLoading"
            class="operate-item"
            icon="el-icon-download"
            @click="handleDownload"
          >
            下载模板
          </el-button>
        </div>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        border
        fit
        :header-cell-style="headerCellStyle"
        highlight-current-row
        style="width: 100%;"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" align="center" width="55">
        </el-table-column> -->
        <el-table-column label="序号" type="index" align="center" width="60">
          <template slot-scope="{ row, $index }">
            <span>{{ getIndex($index) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考生类型" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ getTypeDesc(row.parentType) }}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="考生类型" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.postphone == 1?'安管延期':row.postphone == 0?'安管新办':'' }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="类别/工种" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.examType == "OTHER" ? "其它" : row.userRole }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证号" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.idCard }}</span>
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.gender }}</span>
          </template>
        </el-table-column>
        <el-table-column label="企业名称（全称）">
          <template slot-scope="{ row }">
            <span>{{ row.orgName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="密码" align="center" width="150">
          <template slot-scope="{ row }">
            <span>{{ row.tempPassword }}</span>
          </template>
        </el-table-column>
        <el-table-column label="考试期数">
          <template slot-scope="{ row }">
            <span>{{ row.examPeriod }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数据来源" align="center" width="120">
          <template slot-scope="{ row }">
            <span>
              {{ sources[row.fromInterface] || sources["default"] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" width="150">
          <template slot-scope="{ row }">
            <span>{{ row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="hasPerm('admin')"
          label="操作"
          align="center"
          width="150"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row, $index }">
            <el-button type="primary" size="mini" @click="handleUpdate(row)">
              修改
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(row, $index)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageIndex"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <!-- form -->
    <FormDialog ref="tableForm" @afterSubmit="afterSubmit" />
    <SettingDialog ref="settingForm" @afterSubmit="afterSubmit" />
    <UploadDialog ref="uploadForm" @afterSubmit="afterSubmit" />
  </div>
</template>

<script>
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination";
import baseMixin from "@/mixins/list";
import SettingDialog from "./modules/SettingDialog";
import FormDialog from "./modules/FormDialog";
import UploadDialog from "./modules/UploadDialog";
import request from "@/utils/request";
const sources = {
  1: "接口导入",
  0: "Excel导入",
  default: "Excel导入"
};
export default {
  name: "ExamUser",
  components: { Pagination, FormDialog, SettingDialog, UploadDialog },
  directives: { waves },
  mixins: [baseMixin],
  data() {
    const examTypeList = ["A", "B", "C", "C1", "C2", "C3", "OTHER"];
    return {
      Urls: {
        listUrl: "/api/examUser/page",
        delUrl: "/api/examUser/delete/",
        importExcelUrl: "/api/examUser/upload",
        exportExcelUrl: "/api/examUser/export",
        examPeriodListUrl: "/api/exam/list",
        downloadExcelUrl: "/api/examUser/template/download",
        dictTypeUrl: '/api/dict/typeList',
      },
      examTypes: [
        {
          key: 'SAFETY_NEW',
          value: '安管人员新办'
        },
        {
          key: 'SAFETY_DELAY',
          value: '安管人员延期'
        },
        {
          key: 'SPECIAL_EQP',
          value: '特种设备'
        },
      ],
      examTypeList,
      examPeriodList: [],
      listQuery: {
        orderBy: [
          {
            desc: true,
            orderBy: "id"
          }
        ]
      },
      sources,
      workTypeList: [],
    };
  },
  created() {
    this.getList();
    this.getExamPeriodList();
    // 工种
    this.getDictData('safty_type','workTypeList')
  },
  methods: {
    handleChange(val) {
      if (val == 'SPECIAL_EQP') {
        // 工种
        this.getDictData('special_type','workTypeList')
      } else{
        // 工种
        this.getDictData('safty_type','workTypeList')
      }
    },
    // 考生设置
    handleSetting() {
      this.$refs["settingForm"].dialogStatus = "create";
      this.$refs["settingForm"].add();
    },
    // 导入考生
    handleCreate() {
      this.$refs.uploadForm.add();
    },
    // 获取考试期数
    getExamPeriodList() {
      request({
        url: this.Urls.examPeriodListUrl,
        method: "get"
      })
        .then(res => {
          console.log("period list", res);
          if (res.code == 0) {
            this.examPeriodList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {});
    },
    getTypeDesc(type) {
      let desc = ''
      if (type) {
        for (var i = 0; i < this.examTypes.length; i++) {
          if (this.examTypes[i].key === type) {
            desc = this.examTypes[i].value
            break
          }
        }
      }
      return desc
    }
  }
};
</script>
